<template>
  <div class="wrap">
    <h3 style="margin-bottom:40px">门店管理</h3>
    <div class="header">
      <div style="display:flex">
        <el-button @click="allList">全部</el-button>
        <urban-linkage
          :select-style="selectStyle"
          :model="model"
          @handelProvince="handelProvince"
          @handelCity="handelCity"
          @handelArea="handelArea"
          @handelClear="handelClear"
          @handelAreaClear="handelAreaClear"
          @handelCityClear="handelCityClear"
        />
        <el-input
          v-model="searchKey"
          class="searchInput"
          placeholder="请输入门店ID或名称搜索"
          suffix-icon="el-icon-search"
        />
        <el-button
          type="primary"
          class="searchButton"
          @click="InitialInfo"
        >搜索</el-button>
      </div>
      <div>
        <el-button
          type="primary"
          class="addButton"
          @click="$router.push({ name: 'AddStore', query: {p:$ed({state: 'add'}) } })"
        >添加门店</el-button>
      </div>
    </div>
    <div style="margin-top:20px">
      <el-table
        ref="elTableCommdity"
        v-loading="loading"
        :data="tableBind"
        height="550"
        @selection-change="selectChange"
      >
        <el-table-column type="selection" fixed="left" width="50" />
        <el-table-column label="门店ID" prop="id" width="100" />
        <el-table-column label="门店名称" prop="storeName" width="300">
          <template slot-scope="scope">
            <!-- style="width:180px;word-wrap: break-word;white-space: pre-line;text-align: left;text-align: start;" -->
            <el-button type="text" @click="handelDetils(scope.row)">
              {{ scope.row.storeName }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="门店地址" prop="address" width="300" />
        <el-table-column label="管理员" prop="userName" width="100" />
        <el-table-column label="联系方式" prop="phone" width="120" />
        <el-table-column label="营业时间" prop="businessTime" width="160" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              @click="handelguanli(scope.row)"
            >管理</el-button>
            <el-button
              type="danger"
              plain
              @click="handelRowRemove(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="footer-left">
        <el-button plain size="small" @click="allSelection">全选</el-button>
        <el-button plain size="small" @click="handelSelRemove">删除</el-button>
      </div>
      <el-pagination
        :current-page="pages.currentPage"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="pages.pageSize"
        :total="pages.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { storeList, delStore } from '@/api/customAPI/shop/store'
import urbanLinkage from '@/components/Custom/urbanLinkage'
export default {
  name: 'Stores',
  components: {
    urbanLinkage
  },
  data() {
    return {
      selectStyle: 'width:100px',
      loading: false,
      tableBind: [],
      searchKey: '',
      province: '',
      city: '',
      area: '',
      pages: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      model: {},
      storeId: []
    }
  },
  mounted() {
    this.InitialInfo()
  },
  activated() {
    this.InitialInfo()
  },
  methods: {
    allList() {
      this.province = ''
      this.city = ''
      this.area = ''
      this.searchKey = ''
      this.pages.currentPage = 1
      this.pages.pageSize = 20
      this.model = {}
      this.InitialInfo()
    },
    handelDetils(row) {
      this.$router.push({
        name: 'ShowStore',
        query: { p: this.$ed({ state: 'show', storeId: row.id }) }
      })
      /* localStorage.setItem('storeId', row.id)*/
    },
    handelguanli(row) {
      this.$router.push({
        name: 'StoreDetail',
        query: { p: this.$ed({ storeId: row.id }) }
      })
      /* localStorage.setItem('storeId', row.id)*/
    },
    handelRowRemove(id) {
      this.removeList(id)
    },
    // 多行删除
    handelSelRemove() {
      if (this.storeId.length > 0) {
        this.removeList(this.storeId.toString())
      } else {
        this.$message.warning('未勾选数据')
      }
    },
    /** 删除数据 */
    removeList(id) {
      this.$confirm('你确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(result => {
        delStore({ storeIds: id })
          .then(result => {
            this.$message.success('成功')
            this.InitialInfo()
          })
          .catch(() => {})
      })
    },
    // 城区搜索
    handelArea(v, name, code) {
      this.area = code
      this.InitialInfo()
    },
    handelCity(v, name, code) {
      this.area = ''
      this.city = code
    },
    handelProvince(v, name, code) {
      this.city = ''
      this.province = code
      console.log(this.model)
    },
    handelAreaClear() {
      this.area = ''
    },
    handelCityClear() {
      this.city = ''
    },
    handelClear() {
      this.province = ''
      this.city = ''
      this.area = ''
      this.InitialInfo()
    },
    /** 表格多选 */
    selectChange(value) {
      this.storeId = value.map(inf => inf.id)
    },
    allSelection() {
      this.$refs.elTableCommdity.toggleAllSelection()
    },
    /** 初始化 */
    InitialInfo() {
      this.loading = true
      storeList({
        province: this.province,
        city: this.city,
        area: this.area,
        searchKey: this.searchKey,
        page: this.pages.currentPage,
        limit: this.pages.pageSize
      }).then(result => {
        this.tableBind = result.data.data.list
        this.pages.total = result.data.data.total
        this.loading = false
      })
    },
    handleSizeChange(size) {
      this.pages.pageSize = size
      this.InitialInfo()
    },
    handleCurrentChange(index) {
      this.pages.currentPage = index
      this.InitialInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 50px 100px;
  .header {
    display: flex;
    justify-content: space-between;
    .regionSelect {
      width: 120px;
      margin-left: 3%;
    }
    .searchInput {
      width: 250px;
      margin-left: 4%;
    }
    .searchButton {
      width: 100px;
      margin-left: 3%;
    }
    .addButton {
      width: 120px;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    margin: 50px 0px 100px 0px;
    .footer-left {
      ::v-deep.el-button {
        width: 100px;
        margin: 0px;
      }
    }
  }
}
</style>
